<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ID" prop="id">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="username">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.adminUsername }}</span>
        </template>
      </el-table-column>

      <el-table-column label="注册时间" prop="registryDate">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ scope.row.createdTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <table>
            <tr>
              <td>
                <el-button type="primary" size="mini" plain @click="AssignAdmin"
                  >分配管理员</el-button
                >
              </td>
              <td>
                <el-input
                  v-model="search"
                  size="mini"
                  placeholder="输入关键字搜索"
                />
              </td>
              <td>
                <el-button icon="el-icon-search" size="mini" circle></el-button>
              </td>
            </tr>
          </table>
        </template>
        <template #default="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="用户名" label-width="120px">
          <el-input v-model="formData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px">
          <el-input v-model="formData.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { adminGetList,addAdmin, updateAdmin,deleteAdmin } from "../../../api/index";
export default {
  data() {
    return {
      dialogFormVisible:false,
      tableData: [
        // {
        //   id: 1,
        //   username: "admin",
        //   registryDate: "2021-7-30",
        // },
      ],
      formData:{},
      currentIndex: 0,
      formLabelWidth:'100px',
      search: "",
    };
  },
  methods: {
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      deleteAdmin(row.id).then((data)=>{
        this.tableData.push(data.data);
        this.getlist();
      }).catch(err=>{
        console.log(err);
      })
    },
    //修改
    handleEdit(index,row) {
      // console.log(index,row.id);
      this.formData.id = row.id;
      this.formData.adminUsername = row.username;
      this.currentIndex = index;
      this.dialogFormVisible = true;
    },
    //分配管理员
    AssignAdmin(){
      this.dialogFormVisible = true;
      this.formData.id = 0;
    },
    //取消
    handleCancel(){
      this.dialogFormVisible = false
    },
    //确定
    handleSave(){
      this.dialogFormVisible=false;
      if(this.formData.id===0){
        // 新增
        addAdmin(this.formData).then(({data})=>{
          console.log(data);
          //重新刷新页面
          this.tableData.push(data.data)
        })
      }else{
        var Username = this.formData.username;
        var Password = this.formData.password;
        // 修改
        updateAdmin(this.formData.id,{adminUsername:Username,adminPassword:Password}).then(({data})=>{
          console.log(data);
          this.getlist();
        });
      }
      console.log(this.formData.id)
    },
    //刷新页面
    getlist() {
      //获取用户信息
      adminGetList()
      .then(({ data }) => {
        console.log(data);
        this.tableData = data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style>
</style>